<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;padding: 0 16rpx;box-sizing: border-box;">
			<view style="box-sizing: border-box;" @click="goBack">
				<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;background-color: #FFF;">
					<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
				</view>
			</view>
			<view style="color: #232426;font-size: 32rpx;font-weight: 500;">
				選擇服務時間
			</view>
			<view :class="{'menu-btn':!checkEmpty,'menu-btn-active':checkEmpty}" @click="savePrice">
				儲存
			</view>
		</view>
		<view style="padding:0 32rpx;margin-top: 48rpx;">
			
			<view style="background-color: #FFF;border-radius: 24rpx;">
				<view style="padding:28rpx 56rpx;display: flex;justify-content: space-between;align-items: center;align-self: center;width: 100%; box-sizing: border-box; ">
					<view style="font-size: 28rpx;">開始時間:</view>
					<view @click="showStartData=true" style="font-size: 28rpx;color: #BEC0C5;">{{dateTimeStart}}</view>
					<view style="font-size: 28rpx;">結束時間:</view>
					<view @click="showEndData=true" style="font-size: 28rpx;color: #BEC0C5;">{{dateTimeEnd}}</view>
				</view>
				 <u-datetime-picker
					:show="showStartData"
					v-model="startData"
					mode="date"
					confirmColor="#27C5D6"
					:minDate="startMinDate"
					:maxDate="startMaxDate"
					@confirm="startDataFn"
					@close="closeDataPickerFn"
					@cancel="closeDataPickerFn"
				></u-datetime-picker>
				
				<u-datetime-picker
					:show="showEndData"
					v-model="endData"
					mode="date"
					confirmColor="#27C5D6"
					:minDate="endMinDate"
					:maxDate="endMaxDate"
					@confirm="endDataFn"
					@close="closeDataPickerFn"
					@cancel="closeDataPickerFn"
				></u-datetime-picker>
				<view style="padding:0 56rpx;display: flex;justify-content: space-between;align-items: center;align-self: stretch;">
					<view v-for="(item, index) in weekList" :key="index" >
						<view :class="{'week-item':week!=item.id,'week-item-active':week==item.id}" @click="changeWeek(item.id)">
							<view>{{item.titlle}}</view>
							<view style="font-size: 24rpx;" v-if="showCalendar">{{item.month}}/{{item.day}}</view>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="card">
					<view style="display: flex;justify-content: space-between;">
						<view v-for="(item, index) in dateList" :key="index">
							<view style="color: #BEC0C5;font-size: 24rpx;line-height: 140%;text-align: center;">{{item.title}}</view>
							<view v-for="(item_, index_) in item.children" :key="index_">
								<view 
									:class="{'card-item':!checkExistInSimpleArray(item_.id), 'card-item-active':checkExistInSimpleArray(item_.id)}" 
									@click="checkItem(item_.id)"
								>
									{{item_.title}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-footer" @click="allCheck">
					<view>
						<view v-if="weekRes.length == 24">
							<u-image
								src="/static/images/icon/success-solid.png"
								width="48rpx"
								height="48rpx"
							></u-image>
						</view>
						<view v-else>
							<view class="card-footer-radio"></view>
						</view>
					</view>
					<view class="card-footer-info">
						本日時間全選
					</view>
				</view>
			</view>
			<view style="margin-top: 32rpx;padding: 0 32rpx;">
				<ul style="font-size: 22rpx;color: #6A707C;line-height: 160%;letter-spacing: 0.22px;padding-left: 0; ">
					<li>該時間將<span style="color:#1AAEC0;">「每週重複適用」</span>。若有變動，請於發佈後隨時修改，確保資訊最新。</li>
					<li>請確認並妥善安排你的時間，例如若每次服務時間為 3 小時，請選擇 1:00、4:00、7:00，以避免時間重疊造成衝突。</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				price:'',
				week:1,
				weekList:[{
					id:0,
					titlle:'日',
					month:'',
					day:''
				},{
					id:1,
					titlle:'一',
					month:'',
					day:''
				},{
					id:2,
					titlle:'二',
					month:'',
					day:''
				},{
					id:3,
					titlle:'三',
					month:'',
					day:''
				},{
					id:4,
					titlle:'四',
					month:'',
					day:''
				},{
					id:5,
					titlle:'五',
					month:'',
					day:''
				},{
					id:6,
					titlle:'六',
					month:'',
					day:''
				}],
				dateList:[{
					id:1,
					title:'凌晨',
					children:[{
						id:0,
						title:'00:00'
					},{
						id:1,
						title:'01:00'
					},{
						id:2,
						title:'02:00'
					},{
						id:3,
						title:'03:00'
					},{
						id:4,
						title:'04:00'
					},{
						id:5,
						title:'05:00'
					}]
				},{
					id:2,
					title:'早上',
					children:[{
						id:6,
						title:'06:00'
					},{
						id:7,
						title:'07:00'
					},{
						id:8,
						title:'08:00'
					},{
						id:9,
						title:'09:00'
					},{
						id:10,
						title:'10:00'
					},{
						id:11,
						title:'11:00'
					}]
				},{
					id:3,
					title:'傍晚',
					children:[{
						id:12,
						title:'12:00'
					},{
						id:13,
						title:'13:00'
					},{
						id:14,
						title:'14:00'
					},{
						id:15,
						title:'15:00'
					},{
						id:16,
						title:'16:00'
					},{
						id:17,
						title:'17:00'
					}]
				},{
					id:4,
					title:'晚上',
					children:[{
						id:18,
						title:'18:00'
					},{
						id:19,
						title:'19:00'
					},{
						id:20,
						title:'20:00'
					},{
						id:21,
						title:'21:00'
					},{
						id:22,
						title:'22:00'
					},{
						id:23,
						title:'23:00'
					}]
				}],
				weekRes:[],//当前显示
				dateRes:[[],[],[],[],[],[],[]],//结果集
				checkEmpty:false,//false空的，true有值
				showStartData:false,
				showEndData:false,
				startData:'',
				endData:'',
				dateTimeStart:'',
				dateTimeEnd:'',
				startMinDate:Date.now(),
				startMaxDate: Date.now(),
				endMinDate: Date.now(),
				endMaxDate: Date.now(),
				showCalendar:false
			}
		},
		onLoad(option) {
			let that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('initData', (data) => {
			  console.log('接收到的数据:', data.times); 
			  // 这里可以处理数据，如赋值给data或更新UI
			  that.dateRes = data.times;
			  that.weekRes = that.dateRes[1];
			});
			this.reloadData()
		},
		methods: {
			goBack(){
				uni.navigateBack();
			},
			//初始化日期选择
			reloadData(){
				const now = new Date();
				const futureDate = new Date(now);
				futureDate.setMonth(now.getMonth() + 6);
				
				const timestamp = futureDate.getTime();
				this.startMaxDate = timestamp;
				const date = new Date(now);
				date.setFullYear(date.getFullYear() + 1);
				this.endMaxDate = date.getTime();
				
				//获取年-月-日
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始
				const day = String(now.getDate()).padStart(2, '0');
				
				this.dateTimeStart = `${year}-${month}-${day}`;
				this.dateTimeEnd = `${year}-${month}-${day}`;
				this.setCalendar(now)
			},
			closeDataPickerFn(){
				this.showStartData = false;
				this.showEndData = false;
			},
			//选择了开始日期
			startDataFn(e){
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				//设置开始时间显示
				this.dateTimeStart = `${year}-${month}-${day}`;
				this.dateTimeEnd   = `${year}-${month}-${day}`;
				this.startData = e.value
				this.endData   = e.value
				//设置结束时间的最小值
				this.endMinDate = e.value;
				//设置结束时间的最大值
				date.setFullYear(date.getFullYear() + 1);
				this.endMaxDate = date.getTime();
				this.setCalendar(e.value);
				this.showStartData = false;
			},
			//选择结束日期
			endDataFn(e){
				const date = new Date(e.value);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				//设置结束时间显示
				this.dateTimeEnd   = `${year}-${month}-${day}`;
				this.endData       = e.value
				// 计算时间差（毫秒）
				const diff = Math.abs(e.value - this.startData);
				// 7天的毫秒数 = 7 * 24 * 60 * 60 * 1000
				const sevenDaysInMs = 6 * 24 * 60 * 60 * 1000;
				if(diff > sevenDaysInMs){
					this.showCalendar = false;
				} else {
					this.setCalendar(this.startData);
				}
				this.showEndData = false;
			},
			//设置日期 月/日
			setCalendar(timestamp){
				const date = new Date(timestamp);
				const weekday = date.getDay(); // 0-6 (周日到周六)
				this.week = weekday;
				let j = weekday;//数组位置
				for( let i = 0;i<=6;i++ ){
					const nextDate = new Date(date);
					nextDate.setDate(date.getDate() + i);
					const month = nextDate.getMonth() + 1;
					const day = nextDate.getDate();
					this.weekList[j].month = month;
					this.weekList[j].day = day;
					j = j == 6?0:j+1;
				}
				this.showCalendar = true;
			},
			savePrice(){
				this.dateRes[this.week] = this.weekRes;
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptData', { start:this.dateTimeStart, end:this.dateTimeEnd, data:this.dateRes }); // 发送数据
				uni.navigateBack();
			},
			//检查基本类型数组
			checkExistInSimpleArray(id) {
				return this.weekRes.includes(id);
			},
			checkItem(id){
				if(this.weekRes.includes(id)){
					const index = this.weekRes.findIndex(item => item === id);
					if (index !== -1) {
					    this.weekRes.splice(index, 1);
					}
				} else {
					this.weekRes.push(id);
				}
			},
			changeWeek(id){
				this.dateRes[this.week] = this.weekRes;
				this.week = id;
				this.weekRes = this.dateRes[id];
				this.checkArrEmpty();
			},
			allCheck(){
				if( this.weekRes.length >= 24 ){
					this.weekRes = [];
				} else {
					let res = [];
					for(let i=0;i<24;i++){
						res.push(i);
					}
					this.weekRes = res;
				}
				this.checkArrEmpty();
			},
			checkArrEmpty(){
				if(this.dateRes.every(subArr => subArr.length === 0)){
					this.checkEmpty = false;
				} else {
					this.checkEmpty = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
		
		.menu-btn{
			color: #BEC0C5;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
		.menu-btn-active{
			color: #27C5D6;
			font-size: 32rpx;
			font-weight:500;
			padding-right: 20rpx;
		}
	}
	.week-item{
		font-size: 32rpx;
		text-align: center;
		font-weight: 500;
		line-height: 140%;
		letter-spacing: 0.64rpx;
		padding: 32rpx 0 24rpx;
		color: rgba(190, 192, 197, 0.50);
	}
	.week-item-active{
		font-size: 32rpx;
		text-align: center;
		font-weight: 500;
		line-height: 140%;
		letter-spacing: 0.64rpx;
		padding: 32rpx 0 24rpx;
		color: #020202;
		border-bottom: 2rpx solid #020202;
	}
	.line{
		width: 100%;
		height: 1rpx;
		background-color: #F6F8FA;
		
	}
	.card{
		padding: 40rpx 32rpx 0;
		box-sizing: border-box;
	}
	.card-item{
		padding: 6px 15px;
		border-radius: 12px;
		background-color: #F6F8FA;
		color: #6A707C;
		font-size: 24rpx;
		margin-top: 32rpx;
	}
	.card-item-active{
		padding: 6px 15px;
		border-radius: 12px;
		background-color: #27C5D6;
		color: #fff;
		font-size: 24rpx;
		margin-top: 32rpx;
	}
	.card-footer{
		padding: 48rpx 32rpx 32rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.card-footer-info{
		margin-left: 16rpx;
		color: #232426;
		font-size: 24rpx;
		line-height: 140%;
		letter-spacing: 0.24px;
	}
	.card-footer-radio{
		border-radius: 50%;
		width: 48rpx;
		height: 48rpx;
		background-color: #E5E6E8;
	}
</style>
